<template>
  <div class="refund-order">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <el-icon class="title-icon"><List /></el-icon>
        <h2>退款管理</h2>
      </div>
      <div class="page-subtitle">
        管理所有退款申请，支持筛选、分页和状态分类
      </div>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Grid /></el-icon>
          <span class="header-title">筛选条件</span>
        </div>
      </template>

      <div class="filter-content">
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="filter-item">
              <label class="filter-label">关键词搜索</label>
              <el-input
                v-model="filterForm.keyword"
                placeholder="输入患者姓名或手机号"
                clearable
                size="large"
                class="filter-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="filter-item">
              <label class="filter-label">申请时间</label>
              <div class="date-range-container">
                <el-date-picker
                  v-model="filterForm.startTime"
                  type="datetime"
                  placeholder="开始时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  size="large"
                  class="date-picker"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="filterForm.endTime"
                  type="datetime"
                  placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  size="large"
                  class="date-picker"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="filter-item">
              <label class="filter-label">操作</label>
              <div class="button-group">
                <el-button
                  type="primary"
                  @click="handleFilter"
                  :loading="loading"
                  size="large"
                  class="filter-btn"
                >
                  <el-icon><Search /></el-icon>
                  筛选
                </el-button>
                <el-button @click="handleReset" size="large" class="reset-btn">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 数据列表区域 -->
    <el-card class="list-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon class="header-icon"><List /></el-icon>
            <span class="header-title">退款列表</span>
          </div>
          <div class="header-right">
            <span class="total-count">共 {{ pagination.total }} 条记录</span>
          </div>
        </div>
      </template>

      <!-- 状态标签页 -->
      <div class="status-tabs">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="all">
            <div class="tab-content">
              <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                v-loading="loading"
                element-loading-text="加载中..."
              >
                <el-table-column prop="refundNo" label="退款编号" width="120" />
                <el-table-column prop="createTime" label="申请时间" width="120">
                  <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="orderId" label="订单ID" width="140" />
                <el-table-column
                  prop="refundAmount"
                  label="退款金额"
                  width="100"
                >
                  <template #default="scope">
                    <span class="amount">¥{{ scope.row.refundAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="refundSource" label="来源" width="120">
                  <template #default="scope">
                    {{ getRefundSourceText(scope.row.refundSource) }}
                  </template>
                </el-table-column>
                <el-table-column prop="refundStatus" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.refundStatus)">
                      {{ getStatusText(scope.row.refundStatus) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="processedTime"
                  label="处理时间"
                  width="120"
                >
                  <template #default="scope">
                    {{ formatDate(scope.row.processedTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default="scope">
                    <el-button type="text" @click="handleView(scope.row)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件 -->
              <div class="pagination-container">
                <el-pagination
                  v-model:current-page="pagination.pageIndex"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待处理" name="pending">
            <div class="tab-content">
              <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                v-loading="loading"
                element-loading-text="加载中..."
              >
                <el-table-column prop="refundNo" label="退款编号" width="120" />
                <el-table-column prop="createTime" label="申请时间" width="120">
                  <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="orderId" label="订单ID" width="140" />
                <el-table-column
                  prop="refundAmount"
                  label="退款金额"
                  width="100"
                >
                  <template #default="scope">
                    <span class="amount">¥{{ scope.row.refundAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="refundSource" label="来源" width="120">
                  <template #default="scope">
                    {{ getRefundSourceText(scope.row.refundSource) }}
                  </template>
                </el-table-column>
                <el-table-column prop="refundStatus" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.refundStatus)">
                      {{ getStatusText(scope.row.refundStatus) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="processedTime"
                  label="处理时间"
                  width="120"
                >
                  <template #default="scope">
                    {{ formatDate(scope.row.processedTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default="scope">
                    <el-button type="text" @click="handleView(scope.row)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件 -->
              <div class="pagination-container">
                <el-pagination
                  v-model:current-page="pagination.pageIndex"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="processed">
            <div class="tab-content">
              <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                v-loading="loading"
                element-loading-text="加载中..."
              >
                <el-table-column prop="refundNo" label="退款编号" width="120" />
                <el-table-column prop="createTime" label="申请时间" width="120">
                  <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="orderId" label="订单ID" width="140" />
                <el-table-column
                  prop="refundAmount"
                  label="退款金额"
                  width="100"
                >
                  <template #default="scope">
                    <span class="amount">¥{{ scope.row.refundAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="refundSource" label="来源" width="120">
                  <template #default="scope">
                    {{ getRefundSourceText(scope.row.refundSource) }}
                  </template>
                </el-table-column>
                <el-table-column prop="refundStatus" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.refundStatus)">
                      {{ getStatusText(scope.row.refundStatus) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="processedTime"
                  label="处理时间"
                  width="120"
                >
                  <template #default="scope">
                    {{ formatDate(scope.row.processedTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default="scope">
                    <el-button type="text" @click="handleView(scope.row)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件 -->
              <div class="pagination-container">
                <el-pagination
                  v-model:current-page="pagination.pageIndex"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="rejected">
            <div class="tab-content">
              <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                v-loading="loading"
                element-loading-text="加载中..."
              >
                <el-table-column prop="refundNo" label="退款编号" width="120" />
                <el-table-column prop="createTime" label="申请时间" width="120">
                  <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="orderId" label="订单ID" width="140" />
                <el-table-column
                  prop="refundAmount"
                  label="退款金额"
                  width="100"
                >
                  <template #default="scope">
                    <span class="amount">¥{{ scope.row.refundAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="refundSource" label="来源" width="120">
                  <template #default="scope">
                    {{ getRefundSourceText(scope.row.refundSource) }}
                  </template>
                </el-table-column>
                <el-table-column prop="refundStatus" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.refundStatus)">
                      {{ getStatusText(scope.row.refundStatus) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="processedTime"
                  label="处理时间"
                  width="120"
                >
                  <template #default="scope">
                    {{ formatDate(scope.row.processedTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default="scope">
                    <el-button type="text" @click="handleView(scope.row)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件 -->
              <div class="pagination-container">
                <el-pagination
                  v-model:current-page="pagination.pageIndex"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Grid, List, Search, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { OrderAPI, type RefundQuery } from "../api/order";

// 防抖函数
const debounce = (func: Function, delay: number) => {
  let timeoutId: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(null, args), delay);
  };
};

const route = useRoute();
const router = useRouter();

// 加载状态
const loading = ref(false);

// 筛选表单
const filterForm = reactive({
  keyword: "",
  startTime: "",
  endTime: "",
  refundStatus: "", // 退款状态（内部使用，不显示在UI中）
});

// 当前激活的标签页
const activeTab = ref("all");

// 分页信息
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});

// 表格数据
const tableData = ref<any[]>([]);

// 从路由参数初始化筛选条件
const initFromRoute = () => {
  const query = route.query;
  if (query.PageIndex) {
    pagination.pageIndex = parseInt(query.PageIndex as string);
  }
  if (query.PageSize) {
    pagination.pageSize = parseInt(query.PageSize as string);
  }
  if (query.Keyword) {
    filterForm.keyword = query.Keyword as string;
  }
  if (query.StartTime) {
    filterForm.startTime = query.StartTime as string;
  }
  if (query.EndTime) {
    filterForm.endTime = query.EndTime as string;
  }
  if (query.RefundStatus) {
    filterForm.refundStatus = query.RefundStatus as string;
  }
};

// 更新路由参数
const updateRoute = () => {
  const query: any = {
    PageIndex: pagination.pageIndex.toString(),
    PageSize: pagination.pageSize.toString(),
  };

  if (filterForm.keyword) {
    query.Keyword = filterForm.keyword;
  }
  if (filterForm.startTime) {
    query.StartTime = filterForm.startTime;
  }
  if (filterForm.endTime) {
    query.EndTime = filterForm.endTime;
  }
  if (filterForm.refundStatus) {
    query.RefundStatus = filterForm.refundStatus;
  }

  router.push({
    query,
  });
};

// 获取退款数据
const fetchRefundData = async () => {
  loading.value = true;
  try {
    const params = {
      PageIndex: pagination.pageIndex,
      PageSize: pagination.pageSize,
      Keyword: filterForm.keyword,
      StartTime: filterForm.startTime,
      EndTime: filterForm.endTime,
      RefundStatus: filterForm.refundStatus,
    };

    const response = await OrderAPI.getRefundPage(params);
    tableData.value = response.data;
    pagination.total = response.totalCount;
  } catch (error) {
    console.error("获取退款数据失败:", error);
    ElMessage.error("获取退款数据失败");
  } finally {
    loading.value = false;
  }
};

// 防抖获取退款数据
const debouncedFetchRefundData = debounce(async () => {
  if (loading.value) return;
  await fetchRefundData();
}, 300);

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return "待处理";
    case 5:
      return "已完成";
    case 10:
      return "已拒绝";
    default:
      return "未知";
  }
};

// 获取状态标签类型
const getStatusType = (status: number) => {
  switch (status) {
    case 0:
      return "warning";
    case 5:
      return "success";
    case 10:
      return "danger";
    default:
      return "info";
  }
};

// 格式化日期函数
const formatDate = (dateString: string | null) => {
  if (!dateString) return "-";
  try {
    const date = new Date(dateString);
    return date.toISOString().split("T")[0]; // 只返回 YYYY-MM-DD 格式
  } catch (error) {
    return dateString;
  }
};

// 获取退款来源文本
const getRefundSourceText = (source: number) => {
  switch (source) {
    case 1:
      return "挂号预约";
    case 2:
      return "问诊服务";
    case 3:
      return "药品订单";
    case 4:
      return "检查项目";
    case 5:
      return "其他服务";
    default:
      return "未知来源";
  }
};

// 处理筛选
const handleFilter = () => {
  console.log("点击筛选按钮，调用接口: GetRefundPage");
  pagination.pageIndex = 1; // 重置到第一页
  updateRoute();
  // 不直接调用fetchRefundData，让路由监听器处理
};

// 处理重置
const handleReset = () => {
  filterForm.keyword = "";
  filterForm.startTime = "";
  filterForm.endTime = "";
  // 不重置refundStatus，保持当前标签页状态
  pagination.pageIndex = 1;
  pagination.pageSize = 10;
  updateRoute();
  // 不直接调用fetchRefundData，让路由监听器处理
};

// 处理标签页点击
const handleTabClick = (tab: any) => {
  console.log("点击标签页:", tab.props.name, "调用接口: GetRefundPage");

  // 根据标签页设置退款状态
  switch (tab.props.name) {
    case "all":
      filterForm.refundStatus = "";
      break;
    case "pending":
      filterForm.refundStatus = "0"; // 待处理
      break;
    case "processed":
      filterForm.refundStatus = "5"; // 已完成
      break;
    case "rejected":
      filterForm.refundStatus = "10"; // 已拒绝
      break;
  }

  // 重置到第一页并更新路由
  pagination.pageIndex = 1;
  updateRoute();
  // 不直接调用fetchRefundData，让路由监听器处理
};

// 处理查看详情
const handleView = (row: any) => {
  // 跳转到退款详情页面
  router.push({
    name: "RefundDetail",
    query: {
      id: row.id,
    },
  });
};

// 处理分页大小变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.pageIndex = 1;
  updateRoute();
  // 不直接调用fetchRefundData，让路由监听器处理
};

// 处理当前页变化
const handleCurrentChange = (page: number) => {
  pagination.pageIndex = page;
  updateRoute();
  // 不直接调用fetchRefundData，让路由监听器处理
};

// 监听路由变化
watch(
  () => route.query,
  () => {
    initFromRoute();
    debouncedFetchRefundData(); // 使用防抖版本
  },
  { immediate: false } // 改为false，避免初始化时重复调用
);

// 组件挂载时初始化
onMounted(() => {
  initFromRoute();
  fetchRefundData();
});
</script>

<style scoped>
.refund-order {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.page-title h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-icon {
  font-size: 32px;
  color: #667eea;
}

.page-subtitle {
  color: #7f8c8d;
  font-size: 16px;
  font-weight: 400;
}

/* 卡片样式 */
.filter-card,
.list-card {
  margin-bottom: 24px;
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

.filter-card:hover,
.list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 20px;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.header-right {
  display: flex;
  align-items: center;
}

.total-count {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
  padding: 8px 16px;
  background: rgba(103, 126, 234, 0.1);
  border-radius: 20px;
}

/* 筛选区域样式 */
.filter-content {
  padding: 24px 0;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.filter-input {
  width: 100%;
}

.date-range-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-picker {
  flex: 1;
}

.date-separator {
  color: #7f8c8d;
  font-weight: 500;
  font-size: 14px;
}

.button-group {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  height: 100%;
}

.filter-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(103, 126, 234, 0.4);
}

.reset-btn {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #6c757d;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: #e9ecef;
  color: #495057;
  transform: translateY(-1px);
}

/* 标签页样式 */
.status-tabs {
  margin-top: 16px;
}

:deep(.el-tabs__header) {
  margin-bottom: 24px;
  border-bottom: 2px solid #f1f3f4;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.el-tabs__item) {
  font-weight: 600;
  color: #6c757d;
  font-size: 16px;
  padding: 16px 24px;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
}

:deep(.el-tabs__item:hover) {
  color: #667eea;
  background: rgba(103, 126, 234, 0.1);
}

:deep(.el-tabs__item.is-active) {
  color: #667eea;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    rgba(103, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
}

:deep(.el-tabs__active-bar) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 3px;
  border-radius: 2px;
}

/* 表格样式 */
.tab-content {
  margin-top: 24px;
}

:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #2c3e50;
  font-weight: 700;
  font-size: 14px;
  padding: 16px 12px;
  border-bottom: 2px solid #dee2e6;
}

:deep(.el-table td) {
  padding: 16px 12px;
  border-bottom: 1px solid #f1f3f4;
  transition: background-color 0.3s ease;
}

:deep(.el-table tr:hover td) {
  background-color: rgba(103, 126, 234, 0.05);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: rgba(103, 126, 234, 0.02);
}

/* 金额样式 */
.amount {
  color: #e74c3c;
  font-weight: 700;
  font-size: 16px;
}

/* 状态标签样式 */
:deep(.el-tag) {
  border-radius: 20px;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  font-size: 12px;
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
}

:deep(.el-tag--success) {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: white;
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

/* 操作按钮样式 */
:deep(.el-button--text) {
  color: #667eea;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-button--text:hover) {
  color: #764ba2;
  background: rgba(103, 126, 234, 0.1);
  transform: translateY(-1px);
}

/* 分页样式 */
.pagination-container {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

:deep(.el-pagination) {
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

:deep(.el-pagination .el-pager li) {
  border-radius: 8px;
  margin: 0 4px;
  transition: all 0.3s ease;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
}

:deep(.el-pagination .el-pager li:hover) {
  background: rgba(103, 126, 234, 0.1);
  color: #667eea;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .refund-order {
    padding: 16px;
  }

  .page-title h2 {
    font-size: 24px;
  }

  .filter-content .el-row {
    margin: 0;
  }

  .filter-content .el-col {
    margin-bottom: 16px;
  }

  .date-range-container {
    flex-direction: column;
    gap: 8px;
  }

  .date-separator {
    display: none;
  }

  .button-group {
    flex-direction: column;
    gap: 8px;
  }
}
</style>